<template>  <!--  权益领取-->
  <div class="rights">
    <p class="title" @click="aaa">权益领取</p>
    <van-swipe class="my-swipe" :autoplay="999999" indicator-color="#2D96FF" :loop="loop">
      <!--            <div v-for="pageIndex in page" :key="'page'+pageIndex">-->
      <!--              <van-swipe-item>-->
      <!--                <div class="allitem flex flex-around">-->
      <!--                  <div class="item textAlignCenter" v-for="(item,index) in rightsList" :key="index">-->
      <!--                    <img :src=item.icon>-->
      <!--                    <p>{{ item.title }}</p>-->
      <!--                  </div>-->
      <!--                  <div v-if="pageIndex===page">-->
      <!--                    <div class="item textAlignCenter" v-for="blankIndex in blank" :key="'blank'+blankIndex">-->
      <!--                    </div>-->
      <!--                  </div>-->
      <!--                </div>-->
      <!--              </van-swipe-item>-->
      <!--            </div>-->
      <van-swipe-item>
        <div class="allitem flex flex-around">
          <div class="item textAlignCenter" v-for="(item,index) in rightsList" :key="index">
            <img :src=item.icon>
            <p>{{ item.title }}</p>
          </div>
        </div>
      </van-swipe-item>
      <van-swipe-item>
        <div class="allitem flex flex-around">
          <div class="item textAlignCenter" v-for="(item,index) in rightsList" :key="index">
            <img :src=item.icon>
            <p>{{ item.title }}</p>
          </div>
        </div>
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
import Vue from 'vue';
import {Swipe, SwipeItem} from 'vant';

Vue.use(Swipe);
Vue.use(SwipeItem);
export default {
  name: "rights",
  props: {
    rightsList: {
      type: Array,
      default() {
        return [
          {title: "title", icon: require("@/assets/logo.png")}, {title: "title", icon: require("@/assets/logo.png")},
          {title: "title", icon: require("@/assets/logo.png")}, {title: "title", icon: require("@/assets/logo.png")},
        ]
      }
    }
  },
  data() {
    return {
      loop: false,
    }
  },
  methods: {
    aaa() {
      console.log(this.page + "---" + this.blank)
    }
  },
  computed: {
    page() {
      let sum;
      if (parseInt(this.rightsList.length % 4) === 0) sum = parseInt(this.rightsList.length / 4);
      else sum = parseInt(this.rightsList.length / 4) + 1;
      return sum;
    },
    blank() {
      if (parseInt(this.rightsList.length % 4) === 0) return 0;
      else return 4 - parseInt(this.rightsList.length % 4);
    }
  }
}
</script>

<style scoped>
.rights {
  margin: -.7rem .35rem 0 .35rem;
  height: 3.41rem;
  width: 9.33rem;
  background: #FFFFFF;
  box-shadow: 0 0.06rem 0.44rem 0 rgba(0, 0, 0, 0.08);
}

.title {
  font-size: 0.37rem;
  font-weight: 500;
  color: #333333;
  line-height: .53rem;
  padding: .2rem 0 .21rem .29rem;
}

.my-swipe {
  height: 2.6rem;
}

.item {
  flex-shrink: 0;
  max-width: 2.5rem;
  min-width: 1.2rem;
}

.item img {
  width: 1.17rem;
  height: 1.17rem;
}

.item p {
  margin-top: .21rem;
  font-size: 0.27rem;
  font-weight: 400;
  color: #666666;
  line-height: 0.37rem;
}

</style>